<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
		body,div,input {
            margin:0;
            padding:0;
        }
		input {
            outline:none;
        }
		#outer {
            width:300px;
            margin:10px auto;
            padding:0 15px 30px;
            color:white;
            background:black;
            text-align:center;
        }
		#outer input.f-text {
            width:35px;
            height:20px;
            margin:30px 5px;
            text-align:center;
        }
		#btn {
            display:block;
            width:270px;
            margin:0 auto;
            background:darkolivegreen;
            padding:10px;
            text-align:center;
            color:white;
            font-size:20px;
            cursor:pointer;
        }

	</style>
</head>
<body>
    <div id="outer">
		<input type="text" class="f-text" readonly="readonly" maxlength="2" value="01"/>
		<span>分钟</span>
		<input type="text" class="f-text" readonly="readonly" maxlength="2" value="10"/>
		<span>秒</span>
		<button id="btn">启动</button>
	</div>
</body>
</html>
<script>
    var oDiv = document.getElementById("outer");
    var oBtn = document.getElementById("btn");
    var s = false;
    var timer = null;
    oBtn.onclick = function() {
        if (s==false) {
            timer = setInterval(updateTime,1000);
            updateTime();

            this.style.cssText = "background:darkred";
            this.innerHTML = "取消";
            s=true;
        }
        else {
            clearInterval(timer);

            this.style.cssText = "";
            this.innerHTML = "启动";
            s=false;
        }
        function format(a) {
            return a.toString().replace(/^(\d)$/,"0$1");
        }
        function updateTime() {
            var oInput = oDiv.getElementsByTagName("input");
            /* 分钟位的数转为秒数，加上秒位的数 */
            var oRemain = oInput[0].value.replace(/^0/,"")*60 + parseInt(oInput[1].value.replace(/^0/,""));
            /* 当分秒全部归零时，清除重复*/
            if (oRemain <= 0) {
                clearInterval(timer);
                return;
            }
            /* 自动减一运算 */
            oRemain--;
            /* 分秒位重新赋值 */
            oInput[0].value = format(parseInt(oRemain / 60));
            oRemain %= 60;
            oInput[1].value = format(parseInt(oRemain));
        }
    }
</script>